<template>
	<view class="p-[20rpx]">
		<view class="bg-[#fff] pt-[78rpx] px-[20rpx] rounded-[20rpx]">
			<view class="text-center type">
				我们已发送了<text class="text-[#FF8213]">验证码</text> 到你的手机：
			</view>
			<view class="type1 text-center pt-[40rpx]">
				{{phone}}
			</view>
			<view  style="border-bottom: 1rpx solid #F0F0F0; "
				class="flex h-[110rpx] text-[30rpx] items-center ">
				<view class="flex items-center w-[170rpx] typess">
					<p class="type2">验证码</p>
				</view>
				<view class="">
					<up-input v-model="code" border="none"
						style=" background-color: white;"  placeholder="请输入验证码">
						</up-input>
				</view>
			
			</view>
			<view @click="showpassword()" class="text-center types pt-[50rpx] pb-[40rpx]">
				收不到验证码？
			</view>
		</view>
		<!-- <view class="h-[calc(var(--bottom-button-height)+5px)]"></view> -->
		<view @click="goOn()" class="my-0 py-[20rpx] px-[20rpx] w-full fixed left-0 bottom-[40rpx] box-border " >
			<up-button color="#FE861C" :customStyle="{borderRadius:'20rpx',height:'98rpx'}">
			下一步
		</up-button>
		</view>
		
		<u-modal :show="showtan" :title="Modaltitle" :content='  Modalcontent' :showCancelButton='true'
					@confirm='confirm()' @cancel='cancel()'></u-modal>
	</view>
</template>

<script setup>
	import {
		onLoad,
		onShow
	} from '@dcloudio/uni-app';
	import {getCode} from '@/api/my.js'
	import {
		ref,
		reactive,
		onMounted,
	} from 'vue'
	let phone = ref()
	onLoad((e)=>{
		phone.value = e.phone
		console.log("phone",e);
	})
	
	let showtan = ref(false)
	let showpassword = ()=>{
		showtan.value = true
	}
	let Modaltitle = ref('')
	
	let Modalcontent = ref('重新获取验证码')//通过短信验证码重置支付密码，是否发送验证码到1341904847?
	let cancel = () => {
		showtan.value = false
	}
	let code = ref()
	let confirm = () => {
			
			getCode({
				phone:phone.value,
			    msgType:2,
				}).then(res=>{
				if (res.code == 200) {
					console.log("res",res);
					uni.showToast({
						title: res.msg,
						icon: 'none',
						duration: 1000
					});
					
				} else{
					uni.showToast({
						title: res.msg,
						icon: 'none',
						duration: 1000
					});
				}
			})
			showtan.value = false
		}
	
	// 下一步
	let goOn = ()=>{
		uni.navigateTo({
			url:'/page_my/myInfo/addpassword/addpassword?telCode=' + code.value
		})
	}
</script>

<style lang="scss">
	.types{
		font-size: 24rpx;
		font-family: PingFang SC;
		font-weight: 400;
		color: #2A7AFF;
	}
.type{
	font-size: 30rpx;
	font-family: PingFang SC;
	font-weight: 500;
	color: #2D2D2D;
}
.type1{
	font-size: 56rpx;
	font-family: PingFang SC;
	font-weight: 800;
	color: #010101;
}
.type2{
	font-size: 28rpx;
	font-family: PingFang SC;
	font-weight: 500;
	color: #1A1B1C;
}
</style>
